<template>
  <div>
    <h1>this is father </h1>
    <p>{{ str1 }}---{{ str2 }}</p>
    <!-- 2.直接使用子组件 -->
    <child :msg1="msg1" :send="msg2" :num="num" hhh="hhh" @handleA="son1" @handleB="son2" ref="myson"></child>
  </div>
</template>

<script lang="ts" setup>
// 1.引入子组件
import { ref, nextTick, onMounted } from 'vue';
import child from './child.vue';
const msg1 = ref('父组件的msg1')
const msg2 = ref('give father buy noddle')
const num = ref(10)

let str1 = ref('')
let str2 = ref('')
function son1(val: string) {
  console.log(val)
  str1.value = val
}
function son2(val: string) {
  console.log(val)
  str2.value = val
}

// 用ref获取dom 
// 1.给标签用ref起个名，不能跟变量重名
// 2.使用ref声明一个响应式，名字跟ref起的的名一样 不能赋值

let myson = ref()
nextTick(() => {
  // console.log(myson.value, 'nextTick')
  // 相当于vue2的this.$refs.myson.handleY() 通过ref调用子组件方法
  console.log(myson.value.son3);
  myson.value.handleY()
})

</script>

<style lang="scss" scoped></style>